<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


<ul class="list" id="list"></ul>

<script src="js/iconFile.js"></script>
<script>

createPiano();
function createPiano(){
    list.innerHTML = [...'.'.repeat(15)].map((item,index)=>{
        if(icon[index]){
            return `<li><div class="icon">${icon[index].data}</div></li>`
        }
        return `<li>${index+1}</li>`
    }).join('');
}

window.AudioContext = window.AudioContext || window.webkitAudioContext;
(function () {
    if (!window.AudioContext){
        alert('当前浏览器不支持Web Audio API');
        return;
    }

    class lexAudio {
        constructor(){
            this.audioCtx = new AudioContext();
        }
        play(frequency){
            this.oscillator = this.audioCtx.createOscillator();
            //创建一个OscillatorNode, 它表示一个周期性波形（振荡），基本上来说创造了一个音调

            this.gainNode = this.audioCtx.createGain();
            //创建一个GainNode,它可以控制音频的总音量

            this.oscillator.connect(this.gainNode);
            //把音量，音调和终节点进行关联

            this.gainNode.connect(this.audioCtx.destination);
            //audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备

            this.oscillator.type = 'sine';
            //指定音调的类型，其他还有square|triangle|sawtooth;

            this.oscillator.frequency.value = frequency;
            //设置当前播放声音的频率，也就是最终播放声音的调调

            this.gainNode.gain.setValueAtTime(1, this.audioCtx.currentTime);
            //当前时间设置音量为0

            this.gainNode.gain.linearRampToValueAtTime(1, this.audioCtx.currentTime + 0.01);
            //0.01秒后音量为1

            this.oscillator.start(this.audioCtx.currentTime);
            //音调从当前时间开始播放

            this.gainNode.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + 3);
            //1秒内声音慢慢降低

            this.oscillator.stop(this.audioCtx.currentTime + 1);
            //1秒后完全停止声音
        }
    }

    let audioCtx = new lexAudio();
    let dot = document.querySelectorAll('li');

    let objFre = {
        a65:0,
        a83:1,
        a68:2,
        a70:3,
        a71:4,
        a72:5,
        a74:6,
        a75:7,
        a76:8,
        a186:9,
        a222:10,
        a90:11,
        a88:12,
        a67:13,
        a86:14
    }

    let arrFre= [261.626,293.665,329.626,349.228,391.995,440.000,493.883,523.251,587.330,659.255,698.456,783.991,880.000,987.767,1046.502
    ]

    let now = {};

    document.onkeydown = function(ev){
        let num = 'a'+ev.keyCode;
        if(''+objFre[num] && !now[num]){
            now[num] = true;
            audioCtx.play(arrFre[objFre[num]]);

            dot[objFre[num]].classList.remove('active');
            setTimeout(()=>{
                dot[objFre[num]].classList.add('active');
            },100)
        }
    }

    document.onkeyup = function(ev){
        let num = 'a'+ev.keyCode
        if(now[num]){
            now[num] = false;
        }
    }



    Array.from(dot).forEach((item,index)=>{
        item.onclick = function(){
            let num = 'a'+index
            if(!now[num]){
                now[num] = true;
                audioCtx.play(arrFre[index]);
            }

            setTimeout(()=>{
                if(now[num]){
                    now[num] = false;
                }
            },100)

            this.classList.remove('active');
            setTimeout(()=>{
                this.classList.add('active');
            },100)
        }
    })

})();
</script>

</body>
</html>